<template>
  <div class="setting-content" v-loading="baseInfoDataLoading">
    <h2 class="setting-header">
      <strong>安全设置</strong>
    </h2>
    <div class="content">
      <div class="block">
        <div class="tip">基本设置</div>
        <div class="row">
          <div class="label">登录密码</div>
          <div class="desc">登录锐狐后台管理时需要输入的密码</div>
          <div class="content">已设置</div>
          <div class="action">
            <el-button type="primary" link @click="handleSetChangePsd">修改</el-button>
          </div>
        </div>
        <div class="row">
          <div class="label">安全手机号</div>
          <div class="desc">用于接收消息、验证身份（如找回密码、变更安全设置等），绑定后可支持手机验证码登录</div>
          <div class="content" v-if="baseInfoData.phone?.data">{{baseInfoData.phone.data}}</div>
          <div class="content" v-else><span><i class="iconfont">&#xe687;</i>未设置</span></div>
          <div class="action">
            <el-button type="primary" link>修改</el-button>
          </div>
        </div>
        <div class="row">
          <div class="label">安全邮箱</div>
          <div class="desc">用于接收消息、验证身份（如找回密码、变更安全设置等）</div>
          <div class="content" v-if="baseInfoData.email?.data">
            <span>{{baseInfoData.email.data}}</span>
          </div>
          <div class="content" v-else><span><i class="iconfont">&#xe687;</i>未设置</span></div>
          <div class="action">
            <el-button type="primary" link>修改</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <div class="tip">登录方式</div>
        <div class="row">
          <div class="label">账密登录</div>
          <div class="desc">账号名+密码登录</div>
          <div class="content">已设置</div>
          <div class="action">
          </div>
        </div>
        <div class="row">
          <div class="label">验证码登录</div>
          <div class="desc">用于手机验证码登录、本机号码一键登录</div>
          <div class="content" v-if="baseInfoData.verificationCodeLogin">{{baseInfoData.phone.data}}</div>
          <div class="content" v-else><span><i class="iconfont">&#xe687;</i>未设置</span></div>
          <div class="action">
            <el-switch
              v-model="baseInfoData.verificationCodeLogin"
              style="--el-switch-on-color: #13ce66;"
            />
          </div>
        </div>
        <div class="row">
          <div class="label">三方登录</div>
          <div class="desc">支持三方账号快速登录</div>
          <div class="content">-</div>
          <div class="action">
            <el-button type="primary" link>设置</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <div class="tip">登录保护</div>
        <div class="row">
          <div class="label">密保问题</div>
          <div class="desc">通过设置简单且个人关联性强的问题来增强账号安全</div>
          <div class="content">
            <span><i class="iconfont">&#xe687;</i>未设置</span>
          </div>
          <div class="action">
            <el-button type="primary" link @click="handleSetSecurityIssues">修改</el-button>
          </div>
        </div>
        <div class="row">
          <div class="label">登录保持时间</div>
          <div class="desc">您可以设置保持登录的时间长度（大于等于 1 小时，小于等于 72 小时），超过该时间系统会退出登录</div>
          <div class="content">72 小时</div>
          <div class="action">
            <el-button type="primary" link>修改</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改密码 -->
    <ChangePsd v-model:showDrawer="showChangePsd"/>
    <!-- 设置密保问题 -->
    <SecurityIssues v-model:showDrawer="showSecurityIssues"/>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import ChangePsd from "@/views/personal/accountSecurity/components/ChangePsd.vue"
import SecurityIssues from "@/views/personal/accountSecurity/components/SecurityIssues.vue"
import { getBaseInfo } from "@/api/personal/info/baseInfo"

const showSecurityIssues = ref(false)
const handleSetSecurityIssues = () => {
  showSecurityIssues.value = true
}
const showChangePsd = ref(false)
const handleSetChangePsd = () => {
  showChangePsd.value = true
}
// 获取账号信息
const baseInfoData = ref({})
const baseInfoDataLoading = ref(false)
const getBaseInfoData = async () => {
  baseInfoDataLoading.value = true
  const res = await getBaseInfo().finally(()=>{
    setTimeout(() => {
      baseInfoDataLoading.value = false
      if(process.env.NODE_ENV === 'development') {
        baseInfoData.value = {
          name: 'RUIFOX', // 昵称
          avatar: 'http://foxhcs-alpha-localoss.foxtest.net/20230415/114721741.jpg', // 头像
          userId: 18981818900, // 账号ID
          enrollTime:'2022-03-06 10:59:40', // 注册时间
          lastLoginTime:'2024-09-25 16:26:35', // 最近登录时间
          safePercent: 10, //安全评分 0-100
          personalCertification: true, // 是否完成个人认证 
          verificationCodeLogin: true, // 是否开启验证码登录
          threePartyLogin: { // 三方登录
            wechat: true,
            qq: false,
            weibo: false,
          },
          password:{ // 密码
            data: null,
            updateTime: '2024-09-25 16:26:35'
          },
          phone:{ // 手机号
            data: '18981818900',
            updateTime: '2024-09-25 16:26:35'
          },
          email:{ // 邮箱
            data: null,
            updateTime: null
          },
        }
      }
    }, 500);
  })
  baseInfoData.value = res.data
} 
getBaseInfoData()
</script>
<style scoped lang='scss'>
.setting-content{
  .content{
    .block{
      background: rgb(255, 255, 255);
      font-family: PingFangSC;
      color: rgb(51, 51, 51);
      letter-spacing: 0px;
      .tip{
        padding: 0px 16px;
        font-weight: 500;
        color: rgb(128, 128, 128);
        line-height: 22px;
        margin-top: 16px;
      }
      .row{
        display: flex;
        padding: 15px 16px;
        line-height: 20px;
        border-bottom: 1px solid rgb(229, 229, 229);
        .label{
          width: 90px;
          font-weight: 500;
          margin-right: 24px;
        }
        .desc{
          width: 50%;
          color: rgb(128, 128, 128);
          margin-right: 24px;
        }
        .content{
          flex: 1 1 0%;
          span{
            i{
              margin-right: 5px;
              color: #666;
              font-size: 14px;
            }
          }
        }
        .aciton{
          color: rgb(0, 100, 200);
          cursor: pointer;
          min-width: 24px;
          margin-left: 24px;
        }
      }
    }
  }
}
</style>